<template>
  <div class="list-common-table">
    <t-dialog :visible="infoVisible" :closeBtn="false" :onCancel="()=>{infoVisible=false}"
      :onClose="()=>{infoVisible=false;singleData=''}" :onConfirm="confirmDialog" confirmBtn="提交/确认">
      <t-card title="问题">
        {{singleData.question}}
      </t-card>
      <t-card title="回答" v-show="singleData.status!=0">
        {{singleData.question}}
      </t-card>
      <t-card title="回答" v-show="singleData.status==0">
        <t-textarea placeholder="请输入内容" autosize v-model="singleData.answer" />
      </t-card>
    </t-dialog>
    <t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
      <t-row>
        <t-col :span="10">
          <t-row :gutter="[16, 16]">
            <t-col :span="6">
              <t-form-item label="状态" name="status">
                <t-select v-model="formData.status" class="form-item-content`" :options="QA_STATUS_OPTIONS"
                  placeholder="请选择状态" />
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="姓名" name="name">
                <t-input v-model="formData.name" class="form-item-content" placeholder="请输入姓名"
                  :style="{ minWidth: '134px' }" />
              </t-form-item>
            </t-col>
            <!-- <t-col :flex="1">
              <t-form-item label="文章标题" name="content">
                <t-input v-model="formData.content" class="form-item-content" placeholder="请输入文章标题"
                  :style="{ minWidth: '134px' }" />
              </t-form-item>
            </t-col> -->
          </t-row>
        </t-col>

        <t-col :span="2" class="operation-container">
          <t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }">查询</t-button>
          <t-button type="reset" variant="base" theme="default">重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <div class="table-container">
      <t-table :data="data" :columns="columns" :rowKey="rowKey" :verticalAlign="verticalAlign" :hover="hover"
        :pagination="pagination" @page-change="rehandlePageChange" @change="rehandleChange" :loading="dataLoading">
        <template #status="{ row }">
          <t-tag v-if="row.status === QA_STATUS.NOANS" theme="danger" variant="light">未回复</t-tag>
          <t-tag v-if="row.status === QA_STATUS.ANSWERED" theme="success" variant="light">已回复未读</t-tag>
          <t-tag v-if="row.status === QA_STATUS.VIEWED" variant="light">已读已回复</t-tag>
        </template>
        <template #op="slotProps">
          <t-button @click="rehandleClickOp(slotProps)" shape="circle">
            <t-icon name="browse"></t-icon>
          </t-button>
        </template>
      </t-table>
      <!-- <t-dialog header="确认删除当前所选合同？" :body="confirmBody" :visible.sync="confirmVisible" @confirm="onConfirmDelete" :onCancel="onCancel"></t-dialog> -->
    </div>
  </div>
</template>

<script>
  import {
    prefix
  } from '@/config/global';
  import Trend from '@/components/trend/index.vue';
  import Card from '@/components/card/index.vue';

  import {
    QA_STATUS,
    QA_STATUS_OPTIONS
  } from '@/constants';

  export default {
    name: 'list-table',
    components: {
      Trend,
      Card
    },
    data() {
      return {
        infoVisible: false,
        singleData: {},
        QA_STATUS,
        QA_STATUS_OPTIONS,
        prefix,
        formData: {},
        data: [],
        dataLoading: false,
        value: 'first',
        columns: [{
            title: '患者姓名',
            width: 125,
            fixed: 'left',
            ellipsis: true,
            colKey: 'name'
          }, {
            title: '问题状态',
            colKey: 'status',
            width: 125,
            cell: {
              col: 'status'
            }
          },
          {
            title: '问题',
            // minWidth: '300',
            align: 'left',
            // ellipsis: true,
            colKey: 'question',
            width: 150
          },
          {
            title: '回答',
            // minWidth: '300',
            align: 'left',
            // ellipsis: true,
            colKey: 'answer',
            width: 150,
            minWidth: 100
          },
          {
            align: 'center',
            fixed: 'right',
            width: 100,
            colKey: 'op',
            title: '操作'
          }
        ],
        rowKey: 'index',
        tableLayout: 'auto',
        verticalAlign: 'top',
        bordered: true,
        hover: true,
        rowClassName: rowKey => `${rowKey}-class`,
        // 与pagination对齐
        pagination: {
          defaultPageSize: 10,
          total: 100,
          defaultCurrent: 1,
          pageSizeOptions: [5, 10, 20, 50]
        },
        pages: {
          current: 1,
          pageSize: 10
        },
        confirmVisible: false,
        deleteIdx: -1,
        confirmButton: ['提交', '确认', '确认']
      };
    },
    computed: {
      // confirmBody() {
      //   if (this.deleteIdx > -1) {
      //     const { name } = this.data?.[this.deleteIdx];
      //     return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
      //   }
      //   return '';
      // }
    },
    mounted() {
      // console.log(this.$store.state.user.userInfo.type)
      if (localStorage.getItem('ovcf-token') != undefined) {
        console.log('set token');
        this.$store.commit('user/setToken', localStorage.getItem('ovcf-token'));
        this.$store.commit('user/setUserInfo', JSON.parse(localStorage.getItem('info')));
      }
      this.formData = {
        name: '',
        status: ''
      }
      this.dataLoading = true;
      this.$request
        .post('/doctor-patient?type=qalist&pageSize=10&current=1', {})
        .then(res => {
          if (res.code === 0) {
            console.log(res);
            this.pagination.total = res.count;
            this.data = res.info;
          }
        })
        .catch(e => {
          this.$message.error('错误！');
          console.log(e);
        })
        .finally(() => {
          this.dataLoading = false;
        });
    },
    methods: {
      confirmDialog() {
        if (this.singleData.status != 0) {
          this.infoVisible = false;
          this.singleData = {}
        } else {
          this.singleData.status = 1;
          this.$request.post("/doctor-patient?type=qamodi", {
              data: this.singleData
            })
            .then(res => {
              console.log(res)
              if (res.code === 0) {
                this.$message.success("回复成功")
                this.infoVisible = false;
                this.singleData = {}
              }
            })
            .catch(e => {
              this.$message.error('错误！');
              console.log(e);
              this.singleData.status = 0;
            })
            .finally(() => {});
        }
      },
      closeInfo() {
        this.infoVisible = false;
      },
      onReset(data) {
        console.log(data);
      },
      async onSubmit(data) {
        this.dataLoading = true
        console.log(this.formData);
        // this.pagination.current = 1;
        this.$request
          .post('/doctor-patient?type=qalist&pageSize=' + this.pages.pageSize + '&current=' + this.pages.current, this
            .formData)
          .then(res => {
            console.log(res);
            if (res.code === 0) {
              this.pagination.total = res.count;
              this.data = res.info;
            }
          })
          .catch(e => {
            console.log(e);
          })
          .finally(() => {
            this.dataLoading = false;
          });
      },
      async rehandlePageChange(curr, pageInfo) {
        console.log('分页变化', curr, pageInfo);
        this.pages.pageSize = curr.pageSize;
        this.pages.current = curr.current;
        await this.onSubmit();
      },
      rehandleChange(changeParams, triggerAndData) {
        console.log('统一Change', changeParams, triggerAndData);
      },
      rehandleClickOp({
        text,
        row
      }) {
        console.log(text, row);
        this.singleData = JSON.parse(JSON.stringify(row));
        this.infoVisible = true;
      },
      handleClickDelete(row) {
        this.deleteIdx = row.rowIndex;
        this.confirmVisible = true;
      }
      // onConfirmDelete() {
      //   // 真实业务请发起请求
      //   this.data.splice(this.deleteIdx, 1);
      //   this.pagination.total = this.data.length;
      //   this.confirmVisible = false;
      //   this.$message.success('删除成功');
      //   this.resetIdx();
      // },
      // onCancel() {
      //   this.resetIdx();
      // },
      // resetIdx() {
      //   this.deleteIdx = -1;
      // }
    }
  };
</script>

<style lang="less">
  @import './index.less';

  .list-common-table {
    background-color: @bg-color-container;
    padding: 30px 32px;
    border-radius: @border-radius;

    .table-container {
      margin-top: 30px;
    }
  }

  .form-item-content {
    width: 100%;
  }

  .operation-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .payment-col {
    display: flex;

    .trend-container {
      display: flex;
      align-items: center;
      margin-left: 8px;
    }
  }
</style>
